﻿@using GameStepAzure.Models;
@model List<ProductoCarrito>
@{
    ViewBag.Title = "FinalizarCompra";
    Layout = "~/Views/Shared/_Master.cshtml";
}
<style type="text/css">
    .carrito_lista table
    {
        width: 100%;
        height: 100%;
        margin-top: 20px;
    }
    
    .carrito_lista th
    {
        text-transform: uppercase;
        padding: 20px 0 20px 0;
        background-color: rgb(247,243,243);
        box-shadow: 3px 3px 5px 0 #CCCCCC;
        border-radius: 10px;
    }
    
    .carrito_lista .trEmpty
    {
        height: 20px;
    }
    
    .carrito_lista tr .cantidad input
    {
        text-align: center;
    }
    
    .carrito_lista td.empty
    {
        width: 10px;
    }
    
    .carrito_lista table td
    {
        vertical-align: middle;
        text-align: center;
    }
    
    .carrito_lista td.foto
    {
        width: 15%;
    }
    
    .carrito_lista td.nombre
    {
        margin-left: 20px;
        width: 15%;
    }
    
    .carrito_lista .opciones button
    {
        background: url(../../Images/GameStore/delete.png) no-repeat left;
        padding-left: 25px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: left;
        text-decoration: none;
        font-weight: normal;
        text-decoration: underline;
        font-weight: bold;
        border: none;
        font-size: 1.2em;
    }
    
    .carrito_lista .opciones button:hover
    {
        color: blue;
    }
    
    .carrito_lista .carrito_total
    {
        text-align: right;
        background-color: #EEE;
        margin-bottom: 50px;
        box-shadow: 3px 3px 5px 0 #CCCCCC;
        border-radius: 5px;
        height: 70px;
    }
    
    .carrito_lista .carrito_total span
    {
        position: relative;
        top: 25px;
        bottom: 25%;
        right: 80px;
    }
    
    .carrito_lista .carrito_total .total
    {
        font-weight: bold;
        padding-right: 15px;
    }
    
    .carrito_lista .carrito_total .monto
    {
        font-weight: bold;
        color: Red;
    }
    
    .titulo_compras
    {
        font-size: 30px;
        text-align: center;
    }
    
    .foto img
    {
        width: 100px;
    }
</style>
<h1 class="titulo_compras">
    Mi Carrito</h1>
<section class="carrito_lista">
    <table id="car">
        <tr class="first">
            <th colspan="2">
                producto
            </th>
            <td class="empty" />
            <th>
                c&oacute;digo
            </th>
            <td class="empty" />
            <th>
                precio
            </th>
            <td class="empty" />
            <th>
                cantidad
            </th>
            <td class="empty" />
            <th />
        </tr>
        <tr class="trEmpty">
        </tr>
        @foreach (ProductoCarrito item in Model)
        {
            
            <tr>
                <td class="foto">
                    <center>
                        <a href="@Url.Action("Index", "Details", new { Id = item.Producto.Id, Consola = item.Producto.Consola, Tipo = item.Producto.Tipo })">
                            <img src="@item.Producto.PathImagen" alt="" title=""/>
                        </a>
                    </center>
                </td>
                <td class="nombre">
                    @item.Producto.Nombre
                </td>
                <td class="empty" />
                <td class="id">
                    @item.Producto.Id
                </td>
                <td class="empty" />
                <td class="precio">
                    $@item.Producto.Precio
                </td>
                <td class="empty" />
                <td class="cantidad">
                    <input type="text" readonly="readonly" value="@item.Cantidad" size="2"/>
                </td>
                <td class="empty" />
                <td class="precio">
                    $@(item.Cantidad * item.Producto.Precio)
                </td>
            </tr>       
            <tr>
                <td colspan="10">
                    <hr />
                </td>
            </tr>
        }
    </table>
    <div class="carrito_total">
        <span class="total">Total:</span>
        @{
            float monto = (from p in Model select p.Producto.Precio * p.Cantidad).Sum();
        }
        <span class="monto">$@monto
            <button value="Continuar" onclick="location.href='/Carrito/GuardarCompra'">
                Finalizar Compra</button></span>
    </div>
</section>
